<!-- 开关 组合式 API -->
<script setup>
// 1.导入 reactive
import { reactive, watch } from "vue";

// 2.创建响应式数据
const statusMsg = reactive({
  count: 0,
});
// 3.使用数据
// 4.响应式数据变化
const setCount = () => {
  statusMsg.count++;
};
const logMsg = () => {
  console.log(statusMsg.count);
};

//导入 ref
import { ref } from "vue";
const msg = ref(1);
// 2.使用数据
const setRef = () => {
  msg.value++;
};
//导入 computed
import { computed } from "vue";

const lsit = ref([1, 2, 3, 4]);
// 2.使用数据

const computedList = computed(() => {
  //返回响应式的计算后的数据
  return lsit.value.filter((item) => item > 2);
});

// 3.监听msg数据变化
watch(msg, (newValue, oldValue) => {
  console.log(newValue, oldValue); // 1 2
});

// 4.监听computedList数据变化
watch(
  [computedList, msg],
  ([newLisValue, newMsgValue], [oldLisValue, oldMsgValue]) => {
    console.log(newLisValue, oldLisValue); // [3,4] 2
    console.log(newMsgValue, oldMsgValue); // [1,2,3,4] 1
  },
  {
    inmediate: true, // 立即执行
    deep: true, // 深度监听
  }
);

//深度监听
const statusDeep = ref({ count: 0, name: "张三" });

const setDeep = () => {
  statusDeep.value.count++;
};

watch(
  statusDeep,
  (newValue, oldValue) => {
    console.log("山东交通学院"); // 1 2
    console.log(newValue.count, oldValue.count); // 1 2
  },
  {
    //监听对象时候变数,有使用 deep
    deep: true,
  }
);

watch(
  () => statusDeep.value.count,
  () => {
    console.log("监听对象单个数据 第一种写法"); // 1 2
  }
);

watch(
  () => {
    statusDeep.value.count;
  },
  () => {
    console.log("监听对象单个数据 第二种写法"); // 1 2
  },
  {
    deep: true,
  }
);
</script>

<template>
  <!--  不在要求唯一根元素 -->
  <header>
    <div>computedList {{ computedList }}</div>
    <div>{{ msg }}</div>
    <div>{{ statusMsg.count }}</div>
    <button @click="setCount">reactive</button>
    // 3.响应式数据变化
    <button @click="setRef">ref</button>
    <button @click="setDeep">深度监听({{ statusDeep.count }})</button>
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
